   <aside class="right-side">                
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>Quản lý
                <small>Loại sản phẩm</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i>Trang chủ</a></li>
               <li class="active">Loại sản phẩm</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12"> 
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">Loại sản phẩm</h3> 
                        </div>
                        <div class="box-body table-responsive">
                            <div id="example1_wrapper" class="dataTables_wrapper form-inline" role="grid">
                                <table id="example1" class="table table-bordered table-striped dataTable" aria-describedby="example1_info">
                                <thead>
                                    <tr role="row"><th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 172px;">Tên Loại</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 251px;">Cha</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 147px;"></th></tr>
                                </thead>
                                
                            <tbody role="alert" aria-live="polite" aria-relevant="all">
                                <?php if(count($categories) > 0) {
                                foreach ($categories as $cate) {?>
                                <tr id="<?php echo $cate->id;?>">
                                        <td class=" sorting_1"><?php echo $cate->name;?></td>
                                        <td class=" "><?php if($cate->father_id != 0) echo $cate->father_name; else echo "Không có";?><input id="<?php echo 'father_id_' . $cate->id; ?>" style="display: none" value="<?php echo $cate->father_id;?>"/></td>
                                        <td class=" "><button onclick="add()" class="btn btn-primary btn-flat">Thêm</button>&nbsp;&nbsp;<button onclick="edit(<?php echo $cate->id; ?>)" class="btn btn-info btn-flat">Sửa</button>&nbsp;&nbsp;<button onclick="delete_row(<?php echo $cate->id; ?>)" class="btn btn-danger btn-flat">Xóa</button></td>
                                    </tr>
                               <?php }} else { ?>
                                    <tr id="null">
                                    <td class=" sorting_1">Không có dữ liệu</td>
                                    <td class=" "></td>
                                    <td><button onclick="add()" class="btn btn-primary btn-flat">Thêm</button>&nbsp;&nbsp;<button class="btn btn-info btn-flat" disable>Sửa</button>&nbsp;&nbsp;<button class="btn btn-danger btn-flat" disable>Xóa</button></td>
                                </tr>
                                <?php } ?>

                                </tbody></table>
                            </div>
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div>
            </div>
        </section><!-- /.content -->
    </aside>

<script type="text/javascript">
    //get base url;
    var base_url = '<?php echo base_url();?>';

    function add () {
         var newRow = '<tr id="new_row"><td><input'
            + ' type="text" id="name" class="form-control"/></td>' 
            + '<td><select id="father"><option value="0">Chọn loại sản phẩm'
            + '</option></select>'
            + '</td><td><button onclick="ok_add()"'
            + 'class="btn btn-primary btn-flat">Đồng ý' 
            + '</button>&nbsp;&nbsp;<button onclick="cancle_add()"'
            + 'class="btn btn-danger btn-flat">Hủy</button>'
            + '</td></tr>';

        $('#example1 > tbody > tr:first').before(newRow);

        $.ajax({
             type: "GET",
             url: base_url + "category/get",  
             cache : false,
             success: 
                  function(json){
                    var obj = jQuery.parseJSON(json);

                    var i = 0;
                    for(; i < obj.cates.length; i++) {
                        var item = '<option value="' + obj.cates[i].id + '">'
                        + obj.cates[i].name + '</option>';

                        $('#father').append(item);
                    }
                  },
            error: function() {

            }
        });
    }

    function ok_add() {
        //get value from input has id = name
        var name_value = $('input#name').val();

        //get value from input has id = address
        var father_id = $('select#father').val();

        if(!name_value) {
            alert("Tên loại không được để trống");
            return false;
        }

        //data to submit
        var category = {
            name : name_value,
            father_id : father_id
        };

        $.ajax({
         type: "POST",
         url: base_url + "category/add_new", 
         data: category,
         dataType: "text",  
         cache : false,
         success: 
              function(json){
                alert('Thêm thành công!!!');
                var obj = jQuery.parseJSON(json);

                //add data row to database
                var temp = obj['fname'];
                if(!temp)
                    temp = 'Không có'; 

                var dataRow = [
                    name_value,
                    temp + '<input id="father_id_' + obj['id']
                    + '" style="display: none" value="'
                    + father_id + '"/>',
                    '<button id="' + obj['id'] + '" onclick="add()"'
                    + 'class="btn btn-primary btn-flat">Thêm</button>&nbsp;&nbsp;'
                    + '<button onclick="edit(' + obj['id'] + ')"'
                    + 'class="btn btn-info btn-flat">Sửa</button>&nbsp;&nbsp;'
                    + '<button onclick="delete_row(' + obj['id'] + ')"'
                    + 'class="btn btn-danger btn-flat">Xóa</button>'
                ];

                //add row to data table
                var t = $('#example1').DataTable();
                
                t.row('#null').remove().draw();
                t.row.add(dataRow).draw();

                //add id for new row
                $('button#' + obj['id']).parent().parent().attr('id', obj['id']);
              },
        error: function() {
                alert('Thêm thất bại!!!');
            }
        });
    }

    function cancle_add() {
        $('#example1 >tbody >tr:first').remove();
    }

    //edit data row
    function edit(id) {
        var name_value = $('tr#' + id + ' > td:first').text();
        var father_id = $('input#father_id_' + id).val();

        var newRow = '<tr id="new_row"><td><input'
            + ' type="text" id="name" value="' + name_value + '"'
            + ' class="form-control"/></td>' 
            + '<td><select id="father"><option value="0">Chọn loại sản phẩm'
            + '</option></select></td>'
            + '<td><button onclick="ok_edit(' + id + ')"'
            + 'class="btn btn-primary btn-flat">Đồng ý' 
            + '</button>&nbsp;&nbsp;<button onclick="cancle_edit(' + id +')"'
            + 'class="btn btn-danger btn-flat">Hủy</button>'
            + '</td></tr>';

         $.ajax({
             type: "GET",
             url: base_url + "category/get",  
             cache : false,
             success: 
                  function(json){
                    var obj = jQuery.parseJSON(json);

                    var i = 0;
                    for(; i < obj.cates.length; i++) {
                        var item = '';

                        if(obj.cates[i].id != father_id) {
                            item = '<option value="' + obj.cates[i].id + '">'
                            + obj.cates[i].name + '</option>';
                        }else
                            item = '<option value="' + obj.cates[i].id + '"'
                            + 'selected>' + obj.cates[i].name + '</option>';

                        $('#father').append(item);
                    }
                  },
            error: function() {

            }
        });

        $('#example1 > tbody').find('tr#' + id).hide();    
        $('#example1 > tbody > tr#' + id).before(newRow);
    }

    //ok edit
     function ok_edit(id) {
        //get value from input has id = name
        var name_value = $('input#name').val();

        //get value from input has id = address
        var father_id = $('select#father > option:selected').val();
        var father_name = $('select#father > option:selected').text();

        if(father_id == 0)
            father_name = 'Không có';

        if(!name_value) {
            alert("loại sản phẩm không được để trống");
            return false;
        }

        if(father_id == id) {
            alert("1 loại sản phẩm không có cha là chính nó");
            return false;
        }

        //data to submit
        var category = {
            id : id,
            name : name_value,
            father_id : father_id
        };

        $.ajax({
         type: "POST",
         url: base_url + "category/edit", 
         data: category,
         dataType: "text",  
         cache : false,
         success: 
              function(json){
                alert('Cập nhật thành công!!!');

                 var dataRow = [
                    name_value,
                     father_name + '<input id="father_id_' + id
                    + '" style="display: none" value="'
                    + father_id + '"/>',
                    '<button id="' + id + '" onclick="add()"'
                    + 'class="btn btn-primary btn-flat">Thêm</button>'
                    + '&nbsp;&nbsp;<button onclick="edit(' + id + ')"'
                    + 'class="btn btn-info btn-flat">Sửa</button>'
                    + '&nbsp;&nbsp;<button onclick="delete_row(' + id + ')"'
                    + 'class="btn btn-danger btn-flat">Xóa</button>'
                ];
                //add row to data table
                var t = $('#example1').DataTable();
                //remove old data
                t.row('#' + id).remove().draw();
                t.row.add(dataRow).draw();

                //add id for new row
                $('button#' + id).parent().parent().attr('id', id);
              },
        error: function() {
                alert('Cập nhật thất bại!!!');
            }
        });
    }   

    function cancle_edit (id) {
        $('#example1 > tbody').find('tr#new_row').remove();    
        $('#example1 > tbody > tr#' + id).show();
    }

    function delete_row (id) {
        if (confirm('Bạn có muốn xóa, thao tác này không thể phục hồi?')) {
            //data to submit
            var category = {
                id : id
            };

            $('#example1 > tbody >tr').each(function() {
                if($(this).attr('id') != 'null') {
                    var row_id = $(this).attr('id');
                    var father_id = $(this).find('input#father_id_' + row_id).val();

                    //data row has father was deleted will has father id = 0
                    if(father_id == id) {
                                        //data to submit
                        var category = {
                            id : row_id,
                            father_id : 0
                        };

                        $.ajax({
                            type: "POST",
                            url: base_url + "category/edit_father_id", 
                            data: category,
                            dataType: "text",  
                            cache : false,
                            success: function() {
                                $('tr#' + row_id + '> td:nth-child(2)').text('Không có');
                                $('input#father_id_' + row_id).val('0');
                            },
                            error: function() {
                            
                            }
                        });
                    }
                }
            });

            $.ajax({
                 type: "POST",
                 url: base_url + "category/delete", 
                 data: category,
                 dataType: "text",  
                 cache : false,
                 success: 
                      function(json){
                        alert('Xóa thành công!!!');

                        //add row to data table
                        var t = $('#example1').DataTable();

                        //check if database has no row
                        if($('#example1 > tbody').children('tr').length == 1) {
                            var dataRow = [
                                'Không có dữ liệu',
                                '',
                                '<button onclick="add()" class="btn btn-primary btn-flat">Thêm'
                                + '</button>&nbsp;&nbsp;<button class="btn btn-info btn-flat"'
                                + ' disable>Sửa</button>&nbsp;&nbsp;<button '
                                + ' class="btn btn-danger btn-flat" disable>Xóa</button>'
                            ];
                            t.row.add(dataRow).draw();

                            //remove old data
                            t.row('#' + id).remove().draw();

                            //add id for new row
                            $('#example1 >tbody>tr:first').attr('id', 'null');
                        }
                        //remove old data
                        t.row('#' + id).remove().draw();

                      },
                error: function() {
                        alert('Vui lòng xóa các sản phẩm thuộc loại này trước khi thực hiện thao tác. Xóa thất bại');
                    }
                });
            }
        }

</script>